<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>保养订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <el-card shadow="always">
      <!-- 表头 -->
      <div slot="header">
        <el-form label-width="100px">
          <el-form-item label="订单编号:">
            <el-input v-model="text" placeholder="请输入订单编号" size="medium" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="订单状态:">
            <el-select v-model="state" placeholder="请选择订单状态" size="medium" style="width: 350px;">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="待支付" :value="1"></el-option>
              <el-option label="已支付" :value="2"></el-option>
              <el-option label="待核销" :value="3"></el-option>
              <el-option label="已完成" :value="4"></el-option>
              <el-option label="已取消" :value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单时间:" size="normal">
            <div class="block">
              <el-date-picker value-format="yyyy-MM-dd HH:mm" v-model="timeArr" type="daterange" clearable range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="medium" @click="getSearchIndexList">筛选</el-button>
        <el-button size="medium" @click="clearSearch">清空筛选条件</el-button>
      </div>
      <!-- 表体 -->
      <!-- 表格 -->
      <el-table :data="tableData" v-loading="loading" border style="width: 100%" size="medium">
        <el-table-column prop="id" label="订单编号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="sid" label="服务编号" width="100" align="center">
        </el-table-column>
        <el-table-column prop="serviceitem" label="服务名称" width="100" align="center">
        </el-table-column>
        <el-table-column prop="username" label="买家" width="120" align="center">
        </el-table-column>
        <el-table-column prop="name" label="商家" width="120" align="center">
        </el-table-column>
        <el-table-column prop="presentprice" label="价格" width="100" align="center">
        </el-table-column>
        <el-table-column prop="state" label="订单状态" width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.state | stateFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="predate" label="预约时间" width="160" align="center">
        </el-table-column>
        <el-table-column prop="pladate" label="下单时间" width="160" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" fixed="right" min-width="100" align="center">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" @click="toDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @current-change="getIndexList" @size-change="getIndexList"
        style="text-align: center;margin-top: 20px;" :current-page.sync="pageInfo.pageNum" :page-sizes="[3, 5, 10, 20]"
        :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total">
      </el-pagination>

    </el-card>



  </div>
</template>

<script>
import { indent } from "../mixin";
export default {
  name: "IndentHealth",
  data() {
    return {
      typeid: 3,
    }
  },
  mixins: [indent],
}
</script>

<style scoped></style>